<template>
    <div>
      <a-card title="服务人员管理">
        <ProTable
          :columns="columns"
          :request="fetchGroups"
          row-key="id"
          :action-ref="setActionRef"
          :pagination="pagination"
        >
          <template #option-render="{ dom }">
            <component :is="dom[1]" />
          <component :is="dom[0]" />
            <a-button type="primary" @click="handleAddGroup" style="float: right;">新增小组</a-button>
          </template>
         
            <template #operation="{ column, record }">
              <a-button type="text" @click="handleEdit(record)">编辑</a-button>
              <a-button type="text" @click="handleDelete(record)">删除</a-button>
            </template>
         
        </ProTable>
      </a-card>
  
      <a-modal v-model:visible="modalVisible" :title="modalTitle" @ok="handleModalOk" @cancel="handleModalCancel">
        <a-form :model="form">
          <a-form-item label="小组名称">
            <a-input v-model="form.name" />
          </a-form-item>
          <a-form-item label="小组类型">
            <a-select v-model="form.productType">
              <a-option :value="1">保洁</a-option>
              <a-option :value="2">搬家</a-option>
              <a-option :value="3">保养</a-option>
              <a-option :value="4">维修</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="备注">
            <a-input v-model="form.remark" />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { getServiceGroupList, saveServiceGroup, deleteServiceGroup } from '@/api/serviceGroup';
  import { Message } from '@arco-design/web-vue';
  
  const modalVisible = ref(false);
  const modalTitle = ref('新增小组');
  const form = ref({
    id: null,
    name: '',
    productType: 1,
    remark: '',
  });
  
  const columns = [
    { title: '小组名称', dataIndex: 'name', key: 'name' },
    { title: '小组类型', dataIndex: 'productType', key: 'productType',valueEnum:{
        1: '保洁',
        2: '搬家',
        3: '保养',
        4: '维修'
    },hideInSearch:true },
    { title: '创建时间', dataIndex: 'createTime', key: 'createTime' ,hideInSearch:true},
    { title: '操作', key: 'operation', slotName: 'operation' ,hideInSearch:true},
  ];
  
  const pagination = {
    pageSize: 10,
    total: 0,
    showTotal: total => `共 ${total} 条`,
  };
  
  const actionRef = ref();
  
  const fetchGroups = async (params) => {
    try {
      const response = await getServiceGroupList({ page: params.current, size: params.pageSize ,condition:{}});
      if (response) {
        return {
          success: true,
          data:response.list ,
          total: response.total,
        };
      } else {
        return {
          success: false,
          data: {
            list: [],
            total: 0,
          },
        };
      }
    } catch (error) {
      Message.error('获取小组列表失败');
      return {
        success: false,
        data: {
          list: [],
          total: 0,
        },
      };
    }
  };
  
  const setActionRef = (ref) => {
    actionRef.value = ref;
  };
  
  const handleAddGroup = () => {
    modalTitle.value = '新增小组';
    form.value = {
      id: null,
      name: '',
      productType: '1',
      remark: '',
    };
    modalVisible.value = true;
  };
  
  const handleEdit = (record) => {
    modalTitle.value = '编辑岗位';
    form.value = { ...record };
    modalVisible.value = true;
  };
  
  const handleModalOk = async () => {
    try {
      const url = form.value.id ? '/serviceGroup/saveServiceGroup' : '/serviceGroup/saveServiceGroup';
      await saveServiceGroup(form.value);
      Message.success(form.value.id ? '编辑小组成功' : '新增小组成功');
      modalVisible.value = false;
      actionRef.value.reload();
    } catch (error) {
        console.log(error);
      Message.error(form.value.id ? '编辑小组失败' : '新增小组失败');
    }
  };
  
  const handleModalCancel = () => {
    modalVisible.value = false;
  };
  
  const handleDelete = async (record) => {
    try {
      await deleteServiceGroup(record.id);
      Message.success('删除小组成功');
      actionRef.value.reload();
    } catch (error) {
      Message.error('删除小组失败');
    }
  };
  
  onMounted(() => {
    actionRef.value.reload();
  });
  </script>
  
  <style scoped>
  /* 样式可以根据需要进行调整 */
  </style>